import React, { lazy, Suspense } from 'react'
import { Navigate, Routes, Route } from 'react-router-dom'
import Loading from '../components/Loading/Loading'
import RouterBeforeEach from './RouterBeforeEach'
const Login = lazy(() => import('../page/login/Login'))
const Home = lazy(() => import('../page/home/Home'))
const UserList = lazy(() => import('../page/userManager/userList/UserList'))
const RoleList = lazy(() => import('../page/userManager/roleList/RoleList'))
const DepartmentList = lazy(() => import('../page/depManager/departmentList/DepartmentList'))
const MenuListManager = lazy(() => import('../page/systemManager/menuList/menuList'))
const RoleListManaget = lazy(() => import('../page/systemManager/roleList/roleList'))
const Layout = lazy(() => import('../layout/index'))
const NotFind = lazy(() => import('../page/notFind/NotFind'))
const lazyLoad = children => {
    return <Suspense fallback={<Loading />}>{children}</Suspense>
}
export const menuLists = [
    {
        name: 'Layout',
        path: '/',
        element: lazyLoad(<Layout />),
        icon: 'MailOutlined',
        children: [
            {
                name: '首页',
                path: '/home',
                icon: 'MailOutlined',
                element: lazyLoad(<Home />),
            },
        ],
    },
    {
        name: '部门管理',
        path: '/depManager',
        element: lazyLoad(<Layout />),
        icon: 'CalendarOutlined',
        children: [
            {
                name: '部门列表',
                path: '/depManager/departmentList',
                icon: 'AppstoreOutlined',
                element: lazyLoad(<DepartmentList />),
            },
        ]
    },
    {
        name: '用户管理',
        path: '/userManager',
        element: lazyLoad(<Layout />),
        icon: 'UserOutlined',
        children: [
            {
                name: '用户列表',
                path: '/userManager/userList',
                icon: 'LinkOutlined',
                element: lazyLoad(<UserList />),
            },
            {
                name: '角色列表',
                path: '/userManager/roleList',
                icon: 'SettingOutlined',
                element: lazyLoad(<RoleList />),
            },
        ]
    },
    {
        name: '系统管理',
        path: '/systemManager',
        element: lazyLoad(<Layout />),
        icon: 'UserOutlined',
        children: [
            {
                name: '菜单列表',
                path: '/systemManager/menuList',
                icon: 'LinkOutlined',
                element: lazyLoad(<MenuListManager />),
            },
            {
                name: '角色列表',
                path: '/systemManager/roleList',
                icon: 'SettingOutlined',
                element: lazyLoad(<RoleListManaget />),
            },
        ]
    }
]
const routerArray = [
    {
        path: '/login',
        element: lazyLoad(<Login />),
    },
    ...menuLists,
    {
        path: '*',
        element: lazyLoad(<NotFind />),
    },
    {
        from: '/',
        to: '/home'
    }
]
const Router = () => {
    const mapRouter = (routes) => (
        routes.map((item, idx) => (
            item.path
                ? <Route path={item.path} element={item.element} key={idx}>
                    {   /* 如果有子路由 , 递归渲染 */
                        item.children && mapRouter(item.children)
                    }
                </Route>
                : <Route path={item.from} element={<Navigate to={item.to} />} key={idx}></Route>
        ))
    )
    return (
        <>
            <RouterBeforeEach></RouterBeforeEach>
            <Routes>
                {mapRouter(routerArray)}
            </Routes>
        </>

    )
}
export default Router